<!--
 * @Description:封装自己的scroollTop
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-20 18:52:12
 -->
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>封装自己的scroollTop</title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			body {
				height: 3000px;
			}

			.ti {
				width: 350px;
				height: 220px;
				border: 1px solid #000;
				position: fixed;
				top: 200px;
				left: 100px;
			}

			.flex1 {
				background: -webkit-linear-gradient(right, #BEB9F9, #66DEBA);
				background: -o-linear-gradient(right, #BEB9F9, #66DEBA);
				background: -moz-linear-gradient(right, #BEB9F9, #66DEBA);
				background: -mos-linear-gradient(right, #BEB9F9, #66DEBA);
				background: linear-gradient(right, #BEB9F9, #66DEBA);
			}


			.km {}
		</style>
		<script>
			function scroll() {
				if (window.pageYOffset != null) { //ie9+
					return {
						left: window.pageXOffset,
						top: window.pageYOffset
					}
				} else if (document.compatMode == "CSS1Compat") { //不是怪异模式浏览器 <!DOCTYPE html>
					return {
						left: document.documentElement.scrollLeft,
						top: document.documentElement.scrollTop
					}
				} else { //怪异模式浏览器
					return {
						left: document.body.scrollLeft,
						top: document.body.scrollTop
					}
				}
			}
			window.onscroll = function() {
				document.title = scroll().top + "xiao"
				var sm = document.getElementById("km")
				let kmt = sm.getBoundingClientRect()
				console.log("------1---")
				console.log("top",sm.getBoundingClientRect().top); // 元素上边距离页面上边的距离
				console.log("right",sm.getBoundingClientRect().right); // 元素右边距离页面左边的距离
				console.log("bottom",sm.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
				console.log("left",sm.getBoundingClientRect().left); // 元素左边距离页面左边的距离
				console.log("-----2----")
			}

			window.onload = function() {

			}
		</script>
	</head>

	<body>
		<div>
			document.body.scrollTop||document.documentElement.scrollTop <br>
			document.title=window.pageYOffset
		</div>
		<div class="box" id="box">

		</div>

		<div class="flex1 ti" id="km">
			定位元素
		</div>
	</body>

</html>
